首次參加 iT 邦幫忙鐵人賽，希望透過這三十天可以幫助自己更上層樓，也希望這一系列文章對於前端效能優化有興趣的人可以成為很棒的指引。

我對於 Web 的經驗說來也不算多，真的正式學習這個領域的知識是從去年暑假開始。那時我選擇 Ruby on Rails 這個 Web Framework 作為學習對象，透過這個框架帶領自己進入 Web 的世界。

首先想跟各位談談，了解原理的重要性，這得從我學習 Rails 的經驗說起。起初學習 Rails 時並沒有想太多，當時我僅抱持著一個理想：我要把 Rails 練得很厲害。從一開始只有模糊概念到現在能夠輕鬆地用 Rails 造出一個網站，過程歷經重重關卡，然而這一切都是值得的。不過當我練習寫出越來越多個網站之後有了一個體悟：「雖然我能夠使用 Rails 開發網站，但我對於框架的原理卻一知半解。」於是從那時起，我開始閱讀 Rails 的 Source Code ，最近也開始學習 Golang 並且試著自己寫出一個框架。

當越了解計算機、網路、框架以及我們所使用的程式語言背後的原理後發現，若是真的想成為厲害的開發者就不能只會開發，必須要了解背後的原理，否則網站開發得再快、再好也只是會皮毛而已。

這一系列的文章將會談到各種關於前端效能優化的知識，而在談到一切的技法、 Tips 之前，我們會先談到瀏覽器的原理以及 HTTP 協定。如同前面所說的一般，了解原理或許對某些人來說有些枯燥乏味，但這卻會幫助自己可以以更全面的角度看待這個議題，使自己可以更清楚地了解自己該怎麼做以及「為什麼」要這麼做，而不是只是「背」了一堆效能優化手法，卻不知為何要做出這樣的選擇。

為何講前端效能優化？

你或許會有疑問，為什麼要講前端而不是後端的效能優化？

根據 High Performance Web Sites 這本書指出，大部分網站花費在取得 HTML Document 的時間不會大於 20% ，而其餘的 80%~90% 都花費在取得頁面所需的其他 components 上。由此可知，優化前端的效能，可以榨出的時間是最多的。

當然這並不是說後端的效能完全不用管，這是以後端沒有明顯誇張效能問題為前提所說的。

除了優化前端效能可以榨出最多時間這個理由外，也因為：

1. 為了優化後端效能可能還得重新設計整體程式架構，這樣所花的時間可能是幾個禮拜，甚至是幾個月。
2. 優化前端效能的複雜度較小，按照往後這系列文章會提到的方法調整，頂多只要花幾個小時或是一天就有辦法解決。

基於上述所有理由，我們才會以前端為主要著重點。

之後的文章，我們會分享下面幾大主題：

1. 傳輸層、TCP、HTTP 概述
2. 瀏覽器原理：了解什麼是 DOM, CSSOM, Render-tree
3. 效能優化 Tips
4. 效能分析工具介紹

那麼讓我們開始 Web 前端效能優化學習之旅吧！